<script setup lang="ts">
  import { ref, createVNode } from 'vue';
  import dayjs from 'dayjs';
  import { BasicTable, useTable, TableAction, TableImg } from '@/components/Table';
  import { GetReportIndexApi, DeletReportApi } from '@/api/payment';
  import { Tag } from '@/components/InfoTag';
  import { AddReportModal, EditReportModal, PaymentInfo } from './modal';
  import { useModal } from '@/components/Modal';
  import { getOrderStatusApi } from '@/api/order';
  import { Modal, message } from 'ant-design-vue';
  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';

  const info = ref({
    total: 0,
  });

  const [registerModal, { openModal }] = useModal();
  const [registerEditModal, { openModal: openEditModal }] = useModal();
  const [registerPaymentModal, { openModal: openPaymentModal }] = useModal();

  const [registerTable, { getRawDataSource, reload }] = useTable({
    title: '打款信息',
    canResize: true,
    columns: [
      {
        title: '代理账号',
        dataIndex: 'username',
      },
      {
        title: '报备代付类型',
        dataIndex: 'title',
      },
      {
        title: '报备代付姓名',
        dataIndex: 'name',
      },
      {
        title: '报备代付账号',
        dataIndex: 'account',
      },
      {
        title: '报备银行名称',
        dataIndex: 'bank',
      },
      {
        title: '代付数据',
        dataIndex: 'count',
      },
      {
        title: '审核状态',
        dataIndex: 'reviewStatus',
      },
      {
        title: '备注说明',
        dataIndex: 'remark',
      },
      {
        title: '报备时间',
        dataIndex: 'create_time',
      },
      {
        title: '审核时间',
        dataIndex: 'create_time',
      },
      {
        title: '操作',
        dataIndex: 'action',
        width: 200,
        fixed: 'right',
      },
    ],
    bordered: true,
    showSelectionBar: false,
    showTableSetting: true,
    accordion: true, // 手风琴效果
    api: GetReportIndexApi,
    fetchSetting: {
      listField: 'list',
    },
    afterFetch: () => {
      const data = getRawDataSource();
      info.value.total = data.total;
    },
    useSearchForm: true,
    formConfig: {
      labelWidth: 120,
      schemas: [
        {
          field: 'reviewStatus',
          label: '审核状态',
          component: 'Select',
          colProps: {
            span: 6,
          },
          componentProps: {
            options: [
              {
                label: '待审核',
                value: '0',
              },
              {
                label: '审核成功',
                value: '1',
              },
              {
                label: '审核失败',
                value: '2',
              },
            ],
          },
        },
        {
          field: 'title',
          label: '代付类型',
          component: 'ApiSelect',
          colProps: {
            span: 6,
          },
          componentProps: {
            api: GetReportIndexApi,
            resultField: 'list',
            labelField: 'title',
            valueField: 'title',
          },
        },
        {
          field: 'orderNo',
          label: '代付姓名',
          component: 'Input',
          colProps: {
            span: 6,
          },
        },
        {
          field: 'input',
          label: '代付账号',
          component: 'Input',
          colProps: {
            span: 6,
          },
        },
      ],
    },
    rowKey: 'id',
    takeCare: '这是注意事项',
  });

  const handleEdit = (record) => {
    openEditModal(true, { record, reload });
  };
  const handleDelete = (record) => {
    Modal.confirm({
      title: `您是否要删除“${record.name}, ${record.account}”信息`,
      icon: createVNode(ExclamationCircleOutlined),
      okText: '删除',
      okType: 'danger',
      onOk: () => {
        //
        DeletReportApi([record.id]).then(() => {
          message.success('删除成功');
          reload();
        });
      },
    });
  };
</script>
<template>
  <main>
    <a-row :gutter="16">
      <a-col :span="24" style="margin-top: 16px">
        <BasicTable @register="registerTable">
          <template #toolbar>
            <a-button @click="openModal(true, reload)" type="primary" size="small"
              >添加代付信息</a-button
            >
            <a-button size="small">筛选导出</a-button>
            <Tag title="全部总数" color="red">{{ info.total }}</Tag>
            <Tag title="待审核总数" color="red">{{ info.total }}</Tag>
            <Tag title="已通过总数" color="red">{{ info.total }}</Tag>
          </template>
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'create_time'">
              {{ dayjs(record.create_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}
            </template>
            <template v-if="column.key === 'update_time'">
              {{ dayjs(record.update_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}
            </template>
            <template v-if="column.key === 'type'">{{
              record.type === '0' ? '手动' : record.type === '1' ? '自动' : '第三方'
            }}</template>
            <template v-if="column.key === 'reviewStatus'">
              <a-tag
                :color="
                  record.reviewStatus === '0'
                    ? 'default'
                    : record.reviewStatus == '1'
                      ? 'success'
                      : 'error'
                "
                >{{
                  record.reviewStatus == '0'
                    ? '等待审核'
                    : record.reviewStatus == '1'
                      ? '审核成功'
                      : '审核失败'
                }}</a-tag
              >
            </template>
            <template v-if="column.key === 'count'">
              <a-button type="primary" size="small" danger @click="openPaymentModal(true, record)"
                >查看</a-button
              >
            </template>
            <template v-if="column.key === 'agentImgSrc'">
              <TableImg :img-list="[record.agentImgSrc]" simpleShow />
            </template>
            <template v-if="column.key === 'action'">
              <TableAction
                :actions="[
                  {
                    label: '修改',
                    type: 'default',
                    ifShow: record.reviewStatus == '0',
                    onClick: handleEdit.bind(null, record),
                  },
                  {
                    label: '删除',
                    type: 'default',
                    color: 'error',
                    onClick: handleDelete.bind(null, record),
                  },
                ]"
              />
            </template>
          </template>
        </BasicTable>
      </a-col>
    </a-row>

    <PaymentInfo @register="registerPaymentModal" />
    <AddReportModal @register="registerModal" @ok="reload" />
    <EditReportModal @register="registerEditModal" @ok="reload" />
  </main>
</template>
